<template>
  <div class="kuang2">
    <!-- 2590px -->
    <div>
      <div id="main111" style="width: 2590px; height: 1100px">
        <div class="butKuang">
          <el-button type="primary" class="btnJgxt" @click="turnJianguan" id="line"><span>监管系统</span></el-button >
        </div>
        <div class="main001Kuang">
          <div id="main001" style="width: 1590px; height: 1350px ; " class="main001"></div>
          <!-- <router-view name="echartsGo"></router-view> -->
          <!-- <China/> -->
        </div>
      </div>
      <!-- <div class="kuang2P2Title">风险等级个数详情</div> -->
      <div id="main222" style="width: 2590px; height: 385px; "></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import dataMap from "@/assets/china.json";



export default {
  ame: "Part2",
  components: {
    // China: ()=> import('@/views/part/components/china.vue'),
  },

  data() {
    return {
      dataMap:[],
      arrJSON: null,

      dataList: [
        { name: "南海诸岛" },
        { ename: "beijing", name: "北京"},
        { ename: "tianjin", name: "天津" },
        { ename: "shanghai", name: "上海" },
        { ename: "chongqing", name: "重庆" },
        { ename: "hebei", name: "河北" },
        { ename: "henan", name: "河南"},
        { ename: "yunnan", name: "云南" },
        { ename: "liaoning", name: "辽宁" },
        { ename: "heilongjiang", name: "黑龙江" },
        { ename: "hunan", name: "湖南"},
        { ename: "anhui", name: "安徽" },
        { ename: "shandong", name: "山东" },
        { ename: "xinjiang", name: "新疆" },
        { ename: "jiangsu", name: "江苏" },
        { ename: "zhejiang", name: "浙江" },
        { ename: "jiangxi", name: "江西" },
        { ename: "hubei", name: "湖北" },
        { ename: "guangxi", name: "广西"},
        { ename: "gansu", name: "甘肃" },
        { ename: "shanxi", name: "山西" },
        { ename: "neimenggu", name: "内蒙古" },
        { ename: "shanxi1", name: "陕西" },
        { ename: "jilin", name: "吉林" },
        { ename: "fujian", name: "福建" },
        { ename: "guizhou", name: "贵州" },
        { ename: "guangdong", name: "广东" },
        { ename: "qinghai", name: "青海" },
        { ename: "xizang", name: "西藏" },
        { ename: "sichuan", name: "四川" },
        { ename: "ningxia", name: "宁夏" },
        { ename: "hainan", name: "海南" },
        { name: "台湾"},
        { ename: "xianggang", name: "香港" },
        { ename: "aomen", name: "澳门" },
      ],


    };
  },
  mounted() {
    this.main001();
    this.main222();
  },

  methods: {
    // 第一个饼图
    main111() {
      var myChart = echarts.init(document.getElementById("main111"));

      // myChart.setOption({
      //   //你的代码

      // });

      var xData = [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ];
      var lineData = [100, 100, 100, 100, 100, 100, 100];
      var lastYearData = [3, 20, 42, 34, 35, 45, 33, 42, 34, 25, 35, 33];
      var thisYearData = [11, 38, 23, 39, 46, 36, 29, 23, 39, 16, 36, 29];
      var timeLineData = [1];
      let legend = ["进库数", "出库数"];
      var background = "#0e2147"; //背景
      let textColor = "#fff";
      let lineColor = "rgba(255,255,255,0.2)";
      let colors = [
        {
          borderColor: "rgba(220, 32, 85, 0.8)",
          start: "rgba(220, 32, 85, 0.8)",
          end: "rgba(220, 32, 86, 0.1)",
        },
        {
          borderColor: "rgba(91, 236, 204, 0.8)",
          start: "rgba(91, 236, 204, 0.1)",
          end: "rgba(91, 236, 204, 0.8)",
        },
      ];
      let borderData = [];
      let scale = 2;
      borderData = xData.map((item) => {
        return scale;
      });

      var option = {
        baseOption: {
          timeline: {
            show: false,
            top: 0,
            data: [],
          },
          tooltip: {
            trigger: "axis",
            // type:'shadow',
            axisPointer: {
              type: "shadow",
            },
            backgroundColor: "rgba(17,95,182,0.5)",
            textStyle: {
              color: "#fff",
            },
            formatter: "{a}<br/>{b} :\n\n{c} 件",
          },
          legend: {
            top: "5%",
            right: "49%",
            itemWidth: 20,
            itemHeight: 5,
            itemGap: 30,
            icon: "horizontal",
            textStyle: {
              color: "#ffffff",
              fontSize: 14,
            },
            data: legend,
          },
          grid: [
            // 左边
            {
              show: false,
              left: "6%",
              top: "15%",
              bottom: "10%",
              containLabel: true,
              width: "37%",
            },
            // 中间
            {
              show: false,
              left: "48%",
              top: "15%",
              bottom: "10%",
              width: "0%",
            },
            // 右边
            {
              show: false,
              right: "10%",
              top: "15%",
              bottom: "10%",
              containLabel: true,
              width: "37%",
            },
          ],
          xAxis: [
            {
              type: "value",
              inverse: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: "rgba(45, 67, 119, 0.8)",
                },
              },
              axisTick: {
                show: false,
              },
              position: "bottom",
              axisLabel: {
                show: true,
                color: textColor,
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#2D4377",
                  type: "dashed",
                },
              },
            },
            {
              gridIndex: 1,
              show: false,
            },
            {
              gridIndex: 2,
              axisLine: {
                show: true,
                lineStyle: {
                  color: "rgba(45, 67, 119, 0.8)",
                },
              },
              axisTick: {
                show: false,
              },
              position: "bottom",
              axisLabel: {
                show: true,
                color: textColor,
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#2D4377",
                  type: "dashed",
                },
              },
            },
          ],
          yAxis: [
            {
              type: "category",
              inverse: true,
              position: "right",
              axisLine: {
                show: true,
                lineStyle: {
                  color: lineColor,
                },
              },

              axisTick: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              data: xData,
            },
            {
              gridIndex: 1,
              type: "category",
              inverse: true,
              position: "left",
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: true,
                // padding:[10,0,0,0],
                textStyle: {
                  color: "#ffffff",
                  fontSize: 13,
                },
                align: "center",
              },
              data: xData.map(function (value) {
                return {
                  value: value,
                  textStyle: {
                    align: "center",
                  },
                };
              }),
            },
            {
              gridIndex: 2,
              type: "category",
              inverse: true,
              position: "left",
              axisLine: {
                show: true,
                lineStyle: {
                  color: lineColor,
                },
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              data: xData,
            },
          ],
          series: [],
        },
        options: [],
      };

      // option.baseOption.timeline.data.push(timeLineData[0])
      option.options.push({
        // backgroundColor: "#081736",
        series: [
          {
            name: "进库数",
            type: "bar",
            barWidth: 10,
            stack: "1",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: colors[0].start,
                  },
                  {
                    offset: 1,
                    color: colors[0].end,
                  },
                ]),
              },
            },
            label: {
              normal: {
                show: false,
              },
            },
            data: lastYearData,
            animationEasing: "elasticOut",
          },
          {
            name: "出库数",
            type: "bar",
            stack: "2",
            barWidth: 10,
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: colors[1].start,
                  },
                  {
                    offset: 1,
                    color: colors[1].end,
                  },
                ]),
              },
            },
            label: {
              normal: {
                show: false,
              },
            },
            data: thisYearData,
            animationEasing: "elasticOut",
          },
        ],
      });
      if (option && typeof option === "object") {
        myChart.setOption(option, true);
        var index8 = 0; //播放所在下标
        var mTime = setInterval(function () {
          myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: index8,
          });
          index8++;
          if (index8 >= 12) {
            //console.log('data4', fxdata.length)
            index8 = 0;
            //console.log(fxdata)
          }
        }, 3000);
      }
    },

    // 第一个饼图
    main001() {
      // var myChart = echarts.init(document.getElementById("main001"));
      // myChart.setOption({
      //   //你的代码
      // });

      this.initEchart()
    },

    // 第二个饼图
    main222() {
      var myChart = echarts.init(document.getElementById("main222"));

      //请求的数据
      const resultData = [
        {
          dept: "东部战区",
          age: "21-30",
          num: "10",
        },
        {
          dept: "东部战区",
          age: "31-40",
          num: "5",
        },
        {
          dept: "东部战区",
          age: "41-50",
          num: "1",
        },
        {
          dept: "东部战区",
          age: "51-60",
          num: "26",
        },
        {
          dept: "北部战区",
          age: "21-30",
          num: "15",
        },
        {
          dept: "北部战区",
          age: "31-40",
          num: "2",
        },
        {
          dept: "北部战区",
          age: "41-50",
          num: "1",
        },
        {
          dept: "北部战区",
          age: "51-60",
          num: "1",
        },
        {
          dept: "西部战区",
          age: "21-30",
          num: "20",
        },
        {
          dept: "西部战区",
          age: "31-40",
          num: "10",
        },
        {
          dept: "西部战区",
          age: "41-50",
          num: "11",
        },
        {
          dept: "西部战区",
          age: "51-60",
          num: "1",
        },
        {
          dept: "南部战区",
          age: "21-30",
          num: "3",
        },
        {
          dept: "南部战区",
          age: "31-40",
          num: "5",
        },
        {
          dept: "南部战区",
          age: "41-50",
          num: "1",
        },
        {
          dept: "南部战区",
          age: "51-60",
          num: "10",
        },
        {
          dept: "中部战区",
          age: "21-30",
          num: "3",
        },
        {
          dept: "中部战区",
          age: "31-40",
          num: "15",
        },
        {
          dept: "中部战区",
          age: "41-50",
          num: "1",
        },
        {
          dept: "中部战区",
          age: "51-60",
          num: "20",
        },
      ];

      myChart.setOption({

        // backgroundColor: "#001829",
        //你的代码
        dataset: {
          dimensions: ["dept", "age"],
          source: resultData,
        },
        // x轴线
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#004B97",
                width: 4,
                type: "solid",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#004B97",
                width: 4,
                type: "solid",
              },
            },
            axisLabel: {
              color: "#fff",
              fontSize: 18,
            },
          },
        ],
        // y轴线粗细
        yAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#004B97",
                width: 4,
                type: "solid",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#004B97",
                width: 4,
                type: "solid",
              },
            },
            axisLabel: {
              interval: 0,
              color: "#fff",
              fontSize: 18,
            },
          },
        ],
        // 圆圈大小
        series: [
          {
            type: "scatter",
            symbolSize(data) {
              let result = parseInt(data.num) * 5;
              if (result > 0 && result < 25) {
                result = 30;
              }
              if (result > 70) {
                result = 70;
              }
              return result;
            },
            label: {
              show: true,
              position: "inside",
              color: "#fff",
              fontSize: 16,
              formatter(param) {
                let result = "";
                if (param.value.num !== "0") {
                  result = `${param.value.num}`;
                }
                return result;
              },
            },
            itemStyle: {
              color(param) {
                let color = "";
                const num = parseInt(param.value.num);
                if (num <= 10) {
                  color = "#534bdc";
                } else if (num > 10 && num <= 20) {
                  color = "#6ed2c5";
                } else {
                  color = "#4098cf";
                }
                return color;
              },
            },
          },
        ],
      });
    },

    // 监管系统 跳转
    turnJianguan() {
      // console.log("监管系统");
      // this.$router.push({ path:'/Supervision' })
      // console.log('监管系统 TO')

      const routeUrl = this.$router.resolve({
        // path: "/userRole/userRole/user",
        path: "/jGIndex",
      });
      window.open(routeUrl.href, "_blank");
    },

    // 中国地图 展示
    initEchart() {

      const chinaJson = require('@/assets/china.json');
      // console.log('chinaJson',chinaJson)

      let dataList = this.dataList;
      for(let i = 0; i < dataList.length; i++){
        dataList[i].value = Math.ceil(Math.random() * 1000 - 1);
      }
      const _this = this;
      var myChart = this.$echarts.init(document.getElementById("main001"));
      this.$echarts.registerMap('china', chinaJson)
      var option = {
        tooltip: {
          //数据格式化
          formatter: function(params, callback) {
            return (
              params.seriesName + "<br />" + params.name + "：" + params.value
            );
          },
        },
        visualMap: {
          min: 0,
          max: 1000,
          left: "left",
          top: "center",
          text: ["高", "低"], //取值范围的文字
          inRange: {
            color: ["#e0ffff", "blue"], //取值范围的颜色
          },
          textStyle:{
            fontSize: "20",
            color: "#ffffff"
          },
          show: true, //图注
        },
        geo: {
          map: 'china', //引入地图数据
          roam: false, //不开启缩放和平移
          zoom: 1, //视角缩放比例
          label: {
            normal: {
              show: true,
              fontSize: "15",
              color: "rgba(0,0,0,0.7)",
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: { //高亮的显示设置
              areaColor: "skyblue", //鼠标选择区域颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        // 鼠标悬浮提示框
        series: [
          {
            name: "省份",
            type: "map",
            geoIndex: 0,
            data: this.dataList,
          },
        ],
      };
      myChart.setOption(option);
      // myChart.on("click", function(params) {
        // if(!params.data.ename){
        //   alert('暂无' + params.name + '地图数据');
        //   return;
        // }
        // _this.$router.push({
        //   path: "/province",
        //   query: { provinceName: params.data.ename, province: params.name },
        // });
      // });
    },


  },
};
</script>

<style lang="less" scoped>
.kuang2 {
  color: white;
  width: 100%;
  height: 100%;
}
.kuang2P2Title {
  display: flex;
  align-items: center;
  // justify-content: center;
  padding: 0px 0 0 1140px;
  font-size: 30px;
}
.butKuang {
  display: flex;
  align-items: center;
  justify-content: right;
  .btnJgxt {
    margin: 30px 0 0 0;
    padding: 25px;
    font-size: 28px;
    background-color: #004b97;
    position: absolute;
    left: 3900px;
    top: 160px;
    z-index:10
    
  }
}

button {
  --border-width: 2px;
  --border-radius: 0.35rem;
  --background-spread: 200px;
  
  font-family: Helvetica;
  font-weight: bold;
  font-size: 1.3rem;
  letter-spacing: -0.02rem;
  position: relative;
  color: #fff;
  border: 0;
  border-radius: var(--border-radius);
  background-color: transparent;
  overflow: hidden;
  padding: var(--border-width);
}

button::after {
  content: '';
  position: absolute;
  background: conic-gradient(from 180deg at 50% 50%, #00D1FF 0deg, #EE27FF 106.88deg, #205EFF 206.25deg, #00F0FF 286.87deg, #00D1FF 360deg);
  top: calc(var(--background-spread) * -1);
  right: calc(var(--background-spread) * -1);
  bottom: calc(var(--background-spread) * -1);
  left: calc(var(--background-spread) * -1);
  z-index: -1;
  animation: 3s rotate linear infinite;
}

button#line::after {
  background: conic-gradient(from 180deg at 50% 50%, rgba(0, 209, 255, 0) 0deg, rgba(0, 209, 255, 0) 153.75deg, #00D1FF 345deg, rgba(0, 209, 255, 0) 360deg);
}

button > span {
  display: block;
  background-color: #000;
  padding: 0.8rem 2.5rem;
  border-radius: calc(var(--border-radius) - var(--border-width) / 2);
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}








.main001Kuang{
  // display: flex;
  .main001{
    // display: flex;
    // align-items: center;
    // justify-content: center;
    margin: -80px 0 0 480px;
  }
}
</style>
